{% extends "base.html" %}

{% block title %}借阅记录总览{% endblock %}

{% block content %}
<div class="card shadow-sm">
    <div class="card-header">
        <h2 class="mb-0">借阅记录总览</h2>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">书籍名称</th>
                        <th scope="col">借阅人</th>
                        <th scope="col">借阅日期</th>
                        <th scope="col">归还状态</th>
                    </tr>
                </thead>
                <tbody>
                    {% for record in records %}
                    <tr>
                        <th scope="row">{{ forloop.counter0|add:page_obj.start_index }}</th>
                        <td><a href="{% url 'book_detail' record.book.pk %}">{{ record.book.title }}</a></td>
                        <td>{{ record.borrower.username }}</td>
                        <td>{{ record.borrow_date|date:"Y-m-d H:i" }}</td>
                        <td>
                            {% if record.return_date %}
                                <span class="badge bg-success">已于 {{ record.return_date|date:"Y-m-d" }} 归还</span>
                            {% else %}
                                <span class="badge bg-warning text-dark">借阅中</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center">目前没有任何借阅记录。</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 分页导航 -->
{% if is_paginated %}
<nav aria-label="Page navigation" class="mt-4">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
            <li class="page-item"><a class="page-link" href="?page=1">&laquo; 首页</a></li>
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">上一页</a></li>
        {% endif %}

        <li class="page-item disabled"><span class="page-link">第 {{ page_obj.number }} 页, 共 {{ page_obj.paginator.num_pages }} 页</span></li>

        {% if page_obj.has_next %}
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">下一页</a></li>
            <li class="page-item"><a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">尾页 &raquo;</a></li>
        {% endif %}
    </ul>
</nav>
{% endif %}
{% endblock %}